<template>
  <div>
    <el-row :gutter="20">
      <transition-group :duration="100" name="breadcrumb">
        <el-col
          class="box-col"
          v-for="item in tableData"
          :key="item.System_10_10"
          :span="4"
        >
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ item.System_10_20 }}</span>
              <i class="el-icon-edit" style="float: right;"></i>
            </div>
            <div class="item">
              <div class="text">用户:{{ item.sys1 }}</div>
              <div
                class="rate sys1color"
                :style="{ width: item.sys1Width }"
              ></div>
            </div>
            <div class="item">
              <div class="text">菜单</div>
              <div
                class="rate sys12color"
                :style="{ width: item.sys12Width }"
              ></div>
            </div>
            <div class="item">
              <div class="text">按钮</div>
              <div
                class="rate sys13color"
                :style="{ width: item.sys13Width }"
              ></div>
            </div>
          </el-card>
        </el-col>
      </transition-group>
    </el-row>
  </div>
</template>

<script>
import { System10, System7, System8 } from "@/api";
export default {
  data() {
    return {
      tableData: []
    };
  },
  //外部属性
  props: {},
  //内部方法
  methods: {
    async initPage() {
      await this.getsys10data();
    },
    async getsys10data() {
      //角色
      let sys10data = await System10.get();
      for (let item of sys10data) {
        this.tableData.push(item);
        let sys1data = await this.getsys1data(item.System_10_10);
        let sys12data = await this.getsys12data(item.System_10_10);
        let _sys12data = [];
        sys12data.forEach(sys12 => {
          if (
            _sys12data.findIndex(_sys12 => {
              return _sys12.System_12_30 == sys12.System_12_30;
            }) < 0
          ) {
            _sys12data.push(sys12);
          }
        });
        // console.log(_sys12data);
        let sys13data = await this.getsys13data(item.System_10_10);
        item.sys1Width = await this.getsys1Width(sys1data);
        item.sys1 = sys1data
          .map(sys1 => {
            return sys1.System_1_20;
          })
          .join(",");

        item.sys12Width =
          Math.round((Array.from(new Set(_sys12data)).length / 20) * 10000) /
            100.0 +
          "%";
        item.sys13Width =
          Math.round((Array.from(new Set(sys13data)).length / 50) * 10000) /
            100.0 +
          "%";
      }
      //   sys10data.forEach(async item => {
      //     item.sys1Width = await this.getsys1Width(item.System_10_10);
      //   });
      // this.tableData = sys10data;
    },
    //选择的用户
    async getsys1data(System_10_10) {
      //用户
      let sys1data = await System10.getSystem1(System_10_10);
      this.sys1Data = sys1data;
      return sys1data;
    },
    //选择的菜单ID
    async getsys12data(System_10_10) {
      let sys12data = await System10.getSystem12(System_10_10);
      this.sys12Data = sys12data;
      return sys12data;
    },
    //勾选按钮
    async getsys13data(System_10_10) {
      //勾选按钮
      let sys13data = await System10.getSystem13(System_10_10);
      this.sys13Data = sys13data;
      return sys13data;
    },
    async getsys1Width(sys1data) {
      let res = Math.round((sys1data.length / 10) * 10000) / 100.0 + "%";
      return res + "";
    }
  },
  //组件
  components: {},
  //初始化 异步加async await
  mounted() {
    this.initPage();
  },
  //计算属性
  computed: {},
  //监视
  watch: {}
};
</script>

<style scoped>
.box-col {
  padding-top: 20px;
}
.item {
  height: 30px;
  position: relative;
  line-height: 30px;
  padding-left: 10px;
  margin-top: 5px;
  border: 1px solid #f2f6fc;
  border-radius: 4px;
}
.text {
  color: #909399;
  position: absolute;
  left: 0px;
  top: 0px;
  /* display: inline; */
  width: 100%;
  z-index: 1;
  padding-left: 10px;
}
.rate {
  height: 26px;
  /* display: block; */
  position: absolute;
  right: 0px;
  top: 0px;
  /* display: inline; */
  width: 0%;
  opacity: 0.8;
  border-radius: 4px;
  transition: all 0.5s;
  border: 2px solid #fff;
}
.sys1color {
  background-color: #67c23a;
}
.sys12color {
  background-color: #e6a23c;
}
.sys13color {
  background-color: #409eff;
}
</style>
